<template>
    <div class="blog-add">
        <div class="blog_list">
            <!-- 博客列表 -->
            <van-row
                class="blog_list_item"
                v-for="item in list"
                :key="item.bid"
            >
                <!-- 博客标题 -->
                <van-row type="flex" align="center">
                    <van-col :span="17" @click="handleGoDetail(item)">
                        <div class="van-ellipsis">{{ item.title }}</div>
                    </van-col>

                    <van-col :span="6" :offset="1" v-if="item.uid === user.id">
                        <van-button size="mini" type="primary">编辑</van-button>
                        <van-button
                            size="mini"
                            type="danger"
                            @click="hanldeDelBlog(item.bid)"
                            >删除</van-button
                        >
                    </van-col>
                </van-row>

                <!-- 博客信息 -->
                <van-row class="blog_list_item_info" type="flex" align="center">
                    <!-- 发表人头像 -->
                    <img :src="avatarUrl" alt="avatar" class="avatar" />

                    <!-- 发表人姓名 -->
                    <span class="nickname">{{ item.nickname }}</span>

                    <!-- 发表时间 -->
                    <span class="create-time">{{
                        item.create_time | dateFormat
                    }}</span>
                </van-row>
            </van-row>

            <!-- 添加博客按钮 -->
            <van-button block type="primary" icon="plus" @click="goBlogAdd"
                >添加博客</van-button
            >
        </div>
    </div>
</template>

<script>
import avatarUrl from "@/assets/avatar.jpeg";

export default {
    created() {
        this.getBlogList();
    },
    data() {
        return {
            list: [],
            avatarUrl,
            user: JSON.parse(window.sessionStorage.getItem("user")) || {},
        };
    },
    methods: {
        async getBlogList() {
            const res = await this.$http.get("/blogs");
            this.list = res.data.list;
        },
        goBlogAdd() {
            this.$router.push("/admin/blog/add");
        },
        async hanldeDelBlog(bid) {
            const res = await this.$http.delete(`/blogs/${bid}`);
            if (res.code !== 204) {
                this.$notify({
                    message: res.message,
                });
                return;
            }
            // 删除成功
            this.$notify({
                type: "success",
                message: res.message,
            });
            // 刷新列表
            this.getBlogList();
        },
        handleGoDetail(item) {
            this.$router.push(`/admin/blog/detail/${item.bid}`);
        },
    },
};
</script>

<style lang="less">
.blog-add {
    background-color: #eee;
    height: 100%;

    .blog_list {
        height: 100%;

        &_item {
            margin: 10px 5px;
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 0px 3px #999;

            &_title {
                margin: 0;
                line-height: 30px;
                overflow: hidden;
                white-space: nowrap;
            }

            &_info {
                margin-top: 10px;

                .avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                }

                span {
                    font-size: 14px;
                    color: #999;
                    margin: 5px;
                }
            }
        }
    }
}
</style>
